<template>
  <div class="situationConfig">
    <div class="situationBox" v-for="item in dataList" :key="item.situationObjectId">
      <a href="javascript:;" class="initBtn">
        <i class="el-icon-remove" @click="deleteItem(item)"></i>
      </a>
      <span class="ques">{{ item.situationObjectName }}</span>
      <ul class="situationConfig">
        <li v-for="x in item.situationItems" :key="x.situationItemId">
          <span>{{ x.situationItemName }}</span>
          <i class="el-icon-circle-plus" @click="addItem(x,situationPackageId)" v-if="!x.objects" style="color: #409eff"></i>
          <situationConfig v-if="x.objects && x.objects.length !== 0" :dataList="x.objects" :situationPackageId="situationPackageId" :situationItemId="x.situationItemId" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { delPackage } from '@/api/situation/index';
export default {
  name: 'situationConfig',
  props: {
    dataList: {
      type: Array,
      default: []
    },
    situationPackageId:{
      type:String,
      default:''
    },
    situationItemId:{
      type:String,
      default:''
    }
  },
  watch: {},
  data() {
    return {
     
    };
  },
  methods: {
    addItem(x,situationPackageId){//添加子情形
      let data = {
        situationItemId:x.situationItemId,
        situationPackageId:situationPackageId
      }
      eventBus.$emit('addItem',data);
    },
    deleteItem(item) {
      console.log(this.situationItemId)
      this.$confirm('确定删除吗？').then(() => {
        delPackage({
          situationPackageId: this.situationPackageId,
          situationObjectId: item.situationObjectId,
          situationItemId: this.situationItemId
        }).then((res) => {
          if (res.data.code == 200) {
            this.showDialog = false;
            this.$message.success('删除成功');
            eventBus.$emit('success');
          }
        });
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss">

.situationBox {
  display: flex;
  .initBtn {
    font-size: 30px;
    color: #67c23a;
    height: 40px;
    vertical-align: top;
    margin-top: -6px;
    margin-right: 10px;
  }
  .ques {
    height: 30px;
    line-height: 30px;
    display: inline-block;
    padding: 0 10px;
    border: 1px solid #67c23a !important;
    background: #67c23a !important;
    color: #fff;
    border-radius: 8px;
    margin-right: 10px;
  }
  .situationConfig {
    flex: 1;
    li {
      display: flex;
      margin-bottom: 10px;
      span {
        height: 30px;
        line-height: 30px;
        display: inline-block;
        padding: 0 10px;
        border: 1px solid #e6a23c;
        background: #e6a23c;
        color: #fff;
        border-radius: 8px;
        margin-right: 10px;
      }
      i {
        height: 20px;
        color: #f56c6c;
        font-size: 20px;
        margin-top: 6px;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
}
</style>
